/**
* 图表界面
*/
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">

              <el-select size="small" v-model="editForm.dept" placeholder="请输入所属部门" class="userRole">
                <el-option v-for="type in dept" :label="type.name" :value="type.id" :key="type.id"></el-option>
              </el-select>

<!--              <el-input size="small" v-model="editForm.dept" placeholder="请输入所属部门"></el-input>-->
            </el-col>
<!--            <el-col :span="7">-->

<!--              <el-input size="small" v-model="editForm.tnumber" placeholder="请输入终端号"></el-input>-->
<!--            </el-col>-->
            <el-col :span="7">
                <el-select size="small" v-model="editForm.mode" placeholder="请选择支付类型" class="userRole">
                  <el-option v-for="type in mode" :label="type.name" :value="type.id" :key="type.id"></el-option>
                </el-select>
<!--              <el-input size="small" v-model="editForm.mode" placeholder="请输入支付方式"></el-input>-->
            </el-col>
            <el-col :span="3" class="stsearch">
              <el-button size="small" type="primary"  @click="search()">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stbgc">
          <el-row>
            <el-col :span="8" class="text-c">
              <el-radio v-model="editForm.type" label="day">日</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="editForm.type" label="month">月</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="editForm.type" label="years">年</el-radio>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
<!--          //销售总笔数-->
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
<!--          //销售总金额-->
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="ClickEchart"></div>
<!--          //总点击量-->
        </div>
      </el-col>
    </el-row>
    <h>上面三个直方图不受年月日影响</h>

    <!-- 统计图 -->
    <div>

      <el-row :gutter="23">

        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payEchart"></div>
<!--            //支付方式统计（金额）-->
          </div>
        </el-col>

        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart"></div>
<!--            //支付方式统计（笔数）-->
          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Chart from 'echarts'
  import {ModeList, Statistics, StatisticsDept} from "../../api/payMG";
  import {lert} from "../../api/axiosFun";

  export default {
    name: "welcome",
    data() {
      return {
      chart:'',
        _SCEoption: [],
        _SUMoption: [],
        _Clickoption: [],
        _payoption: [],
        _payNumoption: [],
        dept: '',
        mode: '',
        editForm:{
          dept: '',
          // tnumber: '',
          mode: '',
          type: 'month'
        },
        machineNo: '',
        //  销售总笔数
        SCEoption: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}月 : {c}"
          },
          legend: {
            data: [{
              name: '销售总笔数',
              icon: 'rect'
            }],
            top: 1,
            left: 1,
            itemGap: 10,
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              fontSize: 12,
              color: "#323232"
            }
          },
          grid: {
            left: 50,
            right: 10,
            top: 30,
            bottom: 30,
            borderWidth: 1
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              height: 70,
              interval: 0,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          series: [{
            name: '销售总笔数',
            type: 'bar',
            barGap: 0,
            data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new Chart.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
                )
              },
              emphasis: {
                color: new Chart.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#2378f7'},
                    {offset: 0.7, color: '#2378f7'},
                    {offset: 1, color: '#83bff6'}
                  ]
                )
              }
            }
          }]
        },

        //  销售总金额
        SUMoption: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}月 : {c}"
          },
          legend: {
            data: [{
              name: '销售总金额',
              icon: 'rect'
            }],
            top: 1,
            left: 1,
            itemGap: 10,
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              fontSize: 12,
              color: "#323232"
            }
          },
          grid: {
            left: 50,
            right: 10,
            top: 30,
            bottom: 30,
            borderWidth: 1
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              height: 70,
              interval: 0,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          series: [{
            name: '销售总金额',
            //   type: 'bar',
            type: 'line',
            barGap: 0,
            data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
            barWidth: 10,
            itemStyle: {
              color: "#108ff9"
            }
          }]
        },
        //  总点击量
        Clickoption: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}月 : {c}"
          },
          legend: {
            data: [{
              name: '总点击量',
              icon: 'rect'
            }],
            top: 1,
            left: 1,
            itemGap: 10,
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              fontSize: 12,
              color: "#323232"
            }
          },
          grid: {
            left: 50,
            right: 10,
            top: 30,
            bottom: 30,
            borderWidth: 1
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              height: 70,
              interval: 0,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          series: [{
            name: '总点击量',
            type: 'bar',
            barGap: 0,
            data: [50000, 10000, 80000, 30000, 50000, 60000, 40000, 80000, 50000, 20000, 60000, 40000],
            barWidth: 10,
            itemStyle: {
              color: "#48cefd"
            }
          }]
        },
        //  支付方式统计
        payoption: {
          backgroundColor: '#2c343c',
          title: {
            text: '出库前五名统计',
            left: 20,
            top: 5,
            textStyle: {
              fontSize: 12,
              color: '#ccc'
            }
          },

          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },

          // visualMap: {
          //   show: false,
          //   min: 80,
          //   max: 600,
          //   inRange: {
          //     colorLightness: [0, 1]
          //   }
          // },
          series: [
              {
             name: '统计信息：',
               type: 'pie',
              radius: [10, 150],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
              borderRadius: 8
              },
              data: [
                // {value: 335, name: '支付宝'},
                // {value: 310, name: '银商二维码'},
                // {value: 274, name: '会员'},
                // {value: 235, name: '微信支付'},
                // {value: 100, name: 'Pos通'}
              ],


              // roseType: 'radius',
              // label: {
              //   normal: {
              //     textStyle: {
              //       color: 'rgba(255, 255, 255, 0.3)'
              //     }
              //   }
              // },
              // labelLine: {
              //   normal: {
              //     lineStyle: {
              //       color: 'rgba(255, 255, 255, 0.3)'
              //     },
              //     smooth: 0.2,
              //     length: 10,
              //     length2: 20
              //   }
              // },
              // itemStyle: {
              //   normal: {
              //     color: '#c23531',
              //     shadowBlur: 200,
              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              //   }
              // },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        },
        payNumoption: '',
        result: {}
      }
    },
    // 导入组件
    components: {
      // 点聚合组件
    },
    // 创建完毕状态(里面是操作)
    created() {
      this.getDept()
      this.getMode()
      this.getData()


    },
    // 挂载结束状态(里面是操作)
     mounted() {
       this.getSCE()
       this.getSUM()
       this.getClick()
       this.getpay()
       this.getpayNum()
    },
    // 里面的函数只有调用才会执行
    methods: {
      getDept(){
        //获取部门信息
        StatisticsDept()
          .then(res=>{
            lert(res);
            this.dept=JSON.parse(res.data)

          })
      },
      getMode(){
        //获取支付方式信息
        ModeList()
          .then(res => {
            this.mode=JSON.parse(res.data)
          });
      },
      // 搜索事件
      search() {
        this.getData(this.editForm)
      },
      //获取数据
      getData() {
        Statistics(this.editForm)
        .then(res=>{
          if (res.success) {
            this.$message.success(res.msg)
            var result = JSON.parse(res.data)
            console.log(result.out)

            this.SCEoption.series[0].data = result.sCEoption
            this.SUMoption.series[0].data =result.sUMoption
            this.Clickoption.series[0].data =result.Clickoption

            this.payoption.series[0].data=result.out
            this.getpay()
            // this.payNumoption.series[0].data=result.userop

            // this.payoption.series[0].data=result.payoption
            // this.payNumoption.series[0].data=result.payNumoption
            this.result = result;
          } else {
            this.$message.info(res.msg)
          }
        }).catch(err => {
          this.$message.error('获取可视化数据出错！');
        })
      },
      // 交易总笔数
      getSCE() {
          this.chart = Chart.init(this.$refs.SCEchart)
        this.chart.setOption(this.SCEoption)
      },
      // 交易总金额
      getSUM() {
          this.chart = Chart.init(this.$refs.SUMEchart)
        this.chart.setOption(this.SUMoption)
      },
      // 总点击量
      getClick() {
          this.chart = Chart.init(this.$refs.ClickEchart)
        this.chart.setOption(this.Clickoption)
      },
      // 支付方式统计(出库前五名)
      getpay() {
        this.chart = Chart.init(this.$refs.payEchart)
        this.chart.setOption(this.payoption)
      },
      // 支付方式统计（用户前五名）
      getpayNum() {
        var a=[]
        Statistics(this.editForm)
          .then(res=>{
          a= JSON.parse(res.data).userop
            this.chart = Chart.init(this.$refs.payNumEchart)
            this.chart.setOption({
              backgroundColor: '#2c343c',
              title: {
                text: '用户前5名操作统计',
                left: 10,
                top: 5,
                textStyle: {
                  fontSize: 12,
                  color: '#ccc'
                }
              },

              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },

              // visualMap: {
              //   show: false,
              //   min: 80,
              //   max: 600,
              //   inRange: {
              //     colorLightness: [0, 1]
              //   }
              // },
              series: [
              {
             name: '统计信息：',
               type: 'pie',
              radius: [10, 150],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
              borderRadius: 8
              },
                  data: a
                    // [
                    // { value: 335, name: '支付宝' },
                    // { value: 310, name: '银商二维码' },
                    // { value: 274, name: '会员' },
                    // { value: 235, name: '微信支付' },
                    // { value: 100, name: 'Pos通' }
                    // ]
                    // .sort(function (a, b) { return a.value - b.value; }),
                  ,roseType: 'radius',
                  // label: {
                  //   normal: {
                  //     textStyle: {
                  //       color: 'rgba(255, 255, 255, 0.3)'
                  //     }
                  //   }
                  // },
                  // labelLine: {
                  //   normal: {
                  //     lineStyle: {
                  //       color: 'rgba(255, 255, 255, 0.3)'
                  //     },
                  //     smooth: 0.2,
                  //     length: 10,
                  //     length2: 20
                  //   }
                  // },
                  // itemStyle: {
                  //   normal: {
                  //     color: '#c23531',
                  //     shadowBlur: 200,
                  //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                  //   }
                  // },

                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                    return Math.random() * 200;
                  }
                }
              ]
            })

          })
      }

    }
  };
</script>
<style>
  .stbox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .stbgc {
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    border-radius: 5px;
    padding: 0px 16px;
  }

  .stsearch {
    text-align: center;
  }

  .text-c {
    text-align: center;
  }

  .st-gbox {
    background-color: #fff;
    margin-top: 20px;
    border-radius: 5px;
    height: 30vh;
    box-sizing: border-box;
    padding: 10px;
  }

  .cavasbox {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  .paybox {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    margin-top: 20px;
    height: 32vh;
  }
</style>
